<template lang="pug">
.cp-trman-agency-popup
  el-dialog.tma-pop(
    :title="title",
    :visible="visible",
    @close="closeDialog",
    :close-on-click-modal="!isEdit",
    width="50%")
    el-tabs.tma-pop-tab(v-model="tabIndex")
      el-tab-pane(label="机构信息", name="0")
      el-tab-pane(label="教室", name="1")
      el-tab-pane(label="老师", name="2")
    el-form.tma-pop-form(
      :model="formData",
      :inline="true",
      :rules="rules",
      ref="formData",
      v-show="tabIndex == '0'",
      label-width="80px")
      el-row(:gutter="24")
        el-col(:span="12")
          el-form-item(label="机构名称", prop="agName")
            el-input(v-model="formData.agName", :disabled="!isEdit")
        el-col(:span="12")
          el-form-item(label="机构编号", prop="agCode")
            el-input(v-model="formData.agCode", placeholder="自动生成", disabled)
      el-row(:gutter="24")
        el-col(:span="12")
          el-form-item(label="状态", prop="status")
            el-radio(v-model="formData.status", label="1", :disabled="!isEdit") 启用
            el-radio(v-model="formData.status", label="0", :disabled="!isEdit") 禁用
      el-row(:gutter="24")
        el-col(:span="24")
          el-form-item(label="机构简介")
            el-input(type="textarea", :rows="3", :disabled="!isEdit", placeholder="请输入内容" v-model="formData.agDesc")
      el-row(:gutter="24")
        el-col(:span="24")
          el-form-item(label="机构地址")
            el-input(type="textarea", :rows="3", :disabled="!isEdit", placeholder="请输入内容" v-model="formData.agAddress")
      el-row(:gutter="24")
        el-col(:span="12")
          el-form-item(label="联系人")
            el-input(v-model="formData.agContacts", :disabled="!isEdit")
        el-col(:span="12")
          el-form-item(label="电子邮件")
            el-input(v-model="formData.agEmail", :disabled="!isEdit")
      el-row(:gutter="24")
        el-col(:span="12")
          el-form-item(label="联系电话")
            el-input(v-model="formData.agContactNumber", :disabled="!isEdit")
        el-col(:span="12")
          el-form-item(label="传真")
            el-input(v-model="formData.agFax", :disabled="!isEdit")
    .class-tab(v-show="tabIndex == '1'")
      .class-table-title
        span 教室列表
        el-button.right-btn(type="primary", size="mini", v-if="isEdit", @click="addClass") 添加
      el-table.class-table(:data="formData.classList", border, height="300px")
        el-table-column(show-overflow-tooltip, type="index", label="序号")
        el-table-column(show-overflow-tooltip, label="教室")
          template(slot-scope="scope")
            div(v-show="!scope.row.canEdit") {{scope.row.classAddress}}
            el-input(v-show="scope.row.canEdit", v-model="scope.row.classAddress")
        el-table-column(show-overflow-tooltip, label="状态")
          template(slot-scope="scope")
            div(v-show="!scope.row.canEdit") {{scope.row.status | compare-list(statusSelect)}}
            el-select(v-show="scope.row.canEdit", v-model="scope.row.status")
              el-option(v-for="(item, index) in statusSelect", :key="index", :label="item.name", :value="item.value")
        el-table-column(label="操作", width="100px", v-if="isEdit")
          template(slot-scope="scope")
            div(v-show="!scope.row.canEdit")
              i.icon-act.el-icon-edit(@click="editClass(scope.$index, scope.row)")
              i.icon-act.el-icon-delete(@click="delClass(scope.$index, scope.row)")
            div(v-show="scope.row.canEdit")
              i.icon-act.el-icon-check(@click="saveEditClass(scope.$index, scope.row)")
              i.icon-act.el-icon-close(@click="cancelEditClass(scope.$index, scope.row)")
    .class-tab(v-show="tabIndex == '2'")
      .class-table-title
        span 老师列表
        el-button.right-btn(type="primary", size="mini", v-if="isEdit", @click="addTeacher") 添加
      el-table.class-table(:data="formData.teacherList", border, height="300px")
        el-table-column(show-overflow-tooltip, type="index", label="序号")
        el-table-column(show-overflow-tooltip, label="员工号")
          template(slot-scope="scope")
            div(v-show="!scope.row.canEdit") {{scope.row.teacherCode}}
            el-input(v-show="scope.row.canEdit", v-model="scope.row.teacherCode")
        el-table-column(show-overflow-tooltip, label="姓名")
          template(slot-scope="scope")
            div(v-show="!scope.row.canEdit") {{scope.row.teacherName}}
            el-input(v-show="scope.row.canEdit", v-model="scope.row.teacherName")
        el-table-column(show-overflow-tooltip, label="性别")
          template(slot-scope="scope")
            div(v-show="!scope.row.canEdit") {{scope.row.sex | compare-list(sexSelect)}}
            el-select(v-show="scope.row.canEdit", v-model="scope.row.sex")
              el-option(v-for="(item, index) in sexSelect", :key="index", :label="item.name", :value="item.value")
        el-table-column(show-overflow-tooltip, label="手机")
          template(slot-scope="scope")
            div(v-show="!scope.row.canEdit") {{scope.row.teacherPhone}}
            el-input(v-show="scope.row.canEdit", v-model="scope.row.teacherPhone")
        el-table-column(show-overflow-tooltip, label="状态")
          template(slot-scope="scope")
            div(v-show="!scope.row.canEdit") {{scope.row.status | compare-list(statusSelect)}}
            el-select(v-show="scope.row.canEdit", v-model="scope.row.status")
              el-option(v-for="(item, index) in statusSelect", :key="index", :label="item.name", :value="item.value")
        el-table-column(label="操作", width="100px", v-if="isEdit")
          template(slot-scope="scope")
            div(v-show="!scope.row.canEdit")
              i.icon-act.el-icon-edit(@click="editTeacher(scope.$index, scope.row)")
              i.icon-act.el-icon-delete(@click="delTeacher(scope.$index, scope.row)")
            div(v-show="scope.row.canEdit")
              i.icon-act.el-icon-check(@click="saveEditTeacher(scope.$index, scope.row)")
              i.icon-act.el-icon-close(@click="cancelEditTeacher(scope.$index, scope.row)")
    .pop-footer(slot="footer")
      el-button(plain, @click="closeDialog") 取消
      el-button(type="primary", @click="saveBill", v-if="isEdit", :disabled="saving") 保存
</template>

<script>
import { mapGetters } from 'vuex';
// import ComApi from '@/api/common';
import CheckoutApi from '@/api/inventory/inbound';

// 使内容为空时不提示
const validValue = (rule, value, callback) => {
  callback();
};

export default {
  name: 'agencypopup',
  components: {
  },
  props: {
    title: String,
    visible: Boolean,
    isEdit: Boolean,
    parentData: Object
  },
  data() {
    return {
      tabIndex: '0',
      // 新建时初始数据
      formData: this.parentData,
      rules: {
        agName: [
          { required: true, message: '请输入机构名称', trigger: 'blur' }
        ],
        agCode: [
          { required: true, message: '请输入机构编号', trigger: 'blur', validator: validValue }
        ],
        status: [
          { required: true, message: '请选择状态', trigger: 'change' }
        ]
      },
      // 避免重复提交
      saving: false,
      // 下拉框选项
      sexSelect: [
        { name: '男', value: 0 },
        { name: '女', value: 1 }
      ],
      statusSelect: [
        { name: '启用', value: 1 },
        { name: '禁用', value: 0 }
      ]
    };
  },
  computed: {
    ...mapGetters({
      empSelect: 'empSelect'
    })
  },
  watch: {
    parentData(newData, oldData) {
      if (newData !== oldData) {
        this.formData = newData;
        // 重置tab显示
        this.tabIndex = '0';
        // 避免初始显示表单校验结果
        setTimeout(() => {
          this.clearValidate();
        }, 10);
      }
    }
  },
  created() {
  },
  methods: {
    // 移除表单的校验结果
    clearValidate() {
      if (this.$refs.formData) {
        this.$refs.formData.clearValidate();
      }
    },
    // 关闭、取消
    closeDialog() {
      this.clearValidate();
      this.$emit('close');
    },
    // 校验编辑
    validArray() {
      let canSave = true;
      /* if (!this.formData.teacherList || !this.formData.teacherList.length) {
        this.$message.error('老师列表不能为空');
        canSave = false;
        return false;
      } */
      this.formData.teacherList.forEach((item) => {
        if (!item.teacherCode) {
          this.$message.error('员工号不能为空');
          canSave = false;
          return false;
        }
        if (!item.teacherName) {
          this.$message.error('姓名不能为空');
          canSave = false;
          return false;
        }
        if (item.canEdit) {
          this.$message.error('请先确认物料明细');
          canSave = false;
          return false;
        }
      });
      return canSave;
    },
    // 保存
    saveBill() {
      if (this.saving) {
        return false;
      }
      this.saving = true;
      this.$refs.formData.validate((valid) => {
        if (!valid) {
          this.$message.error('必填项不能为空');
          this.saving = false;
          return false;
        }
        if (!this.validArray()) {
          this.saving = false;
          return false;
        }
        const params = { ...this.formData };
        CheckoutApi.saveNewInvCheckout(params).then((res) => {
          if (!res.status) {
            if (!this.formData.agCode) {
              // 新增
              res.obj.isNew = true;
            } else {
              res.obj.isNew = false;
            }
            this.$emit('submit', res.obj);
            this.closeDialog();
            this.$message({ message: '保存成功', type: 'success' });
            this.saving = false;
          } else {
            this.$message.error(res.comment || '保存失败');
            this.saving = false;
          }
        }).catch((error) => {
          this.saving = false;
          console.log(JSON.stringify(error));
        });
        return true;
      });
    },
    /* ****** 教室tab  ****** */
    // 新增
    addClass() {
      const item = { canEdit: true, status: 1 };
      if (this.formData.classList) {
        this.formData.classList.unshift(item);
        this.classListBC = this.formData.classList.slice();
      } else {
        this.$set(this.formData, 'classList', [item]);
        this.classListBC = this.formData.classList.slice();
      }
    },
    // 编辑
    editClass(index) {
      this.$set(this.formData.classList[index], 'canEdit', true);
      this.classListBC = this.formData.classList.slice();
    },
    // 删除
    delClass(index) {
      this.formData.classList.splice(index, 1);
      this.classListBC.splice(index, 1);
    },
    // 保存编辑
    saveEditClass(index) {
      this.formData.classList[index].canEdit = false;
    },
    // 取消编辑
    cancelEditClass(index) {
      const cache = Object.assign({}, this.classListBC[index], { canEdit: false });
      this.formData.classList.splice(index, 1, cache);
      this.formData.classList[index].canEdit = false;
    },
    /* ****** 老师tab  ****** */
    // 新增
    addTeacher() {
      const item = { canEdit: true, status: 1 };
      if (this.formData.teacherList) {
        this.formData.teacherList.unshift(item);
        this.teacherListBC = this.formData.teacherList.slice();
      } else {
        this.$set(this.formData, 'teacherList', [item]);
        this.teacherListBC = this.formData.teacherList.slice();
      }
    },
    // 编辑
    editTeacher(index) {
      this.$set(this.formData.teacherList[index], 'canEdit', true);
      this.teacherListBC = this.formData.teacherList.slice();
    },
    // 删除
    delTeacher(index) {
      this.formData.teacherList.splice(index, 1);
      this.teacherListBC.splice(index, 1);
    },
    // 保存编辑
    saveEditTeacher(index, row) {
      const { teacherCode, teacherName } = row;
      if (!teacherCode) {
        this.$message.error('员工号不能为空');
        return false;
      }
      if (!teacherName) {
        this.$message.error('姓名不能为空');
        return false;
      }
      this.formData.teacherList[index].canEdit = false;
    },
    // 取消编辑
    cancelEditTeacher(index) {
      const cache = Object.assign({}, this.teacherListBC[index], { canEdit: false });
      this.formData.teacherList.splice(index, 1, cache);
      this.formData.teacherList[index].canEdit = false;
    }
  }
};
</script>

<style lang="sass">
$SEARCHHEIGHT: 104px
$SELECTWIDTH: 100px
.cp-trman-agency-popup
  .el-table
    th, td
      text-align: center
  .tma-pop
    &::-webkit-scrollbar
      display: none
    .el-dialog
      margin-top: 5vh!important
    .el-dialog__body
      padding: 0 24px 15px
    .el-dialog__footer
      text-align: center
      padding-top: 0
      .el-button
        width: 80px
  .tma-pop-tab
    .el-tabs__nav-wrap::after
      background-color: #fff
  .tma-pop-form
    .el-col
      overflow: inherit
    .el-form-item
      width: 100%
      margin-right: 0
    .el-form-item__label
      width: 80px
      text-align: left
    .el-form-item__content
      min-width: 120px
      width: calc(100% - 80px)
    .el-select, .el-date-editor.el-input
      width: 100%
    .height32
      height: 32px
      line-height: 32px
  .class-tab
    .class-table-title
      line-height: 28px
      margin: 0 0 10px 0
      .right-btn
        display: inline-block
        float: right
    .class-table
      .table-input-time
        .el-date-editor.el-input, .el-date-editor.el-input__inner
          width: auto
        .el-input--prefix .el-input__inner
          padding-right: 0
  .icon-act
    font-size: 16px
    font-weight: 500
    padding: 4px
    cursor: pointer
    &:hover
      color: #5D9BFB
</style>
